import styles from './login.module.scss'
import initLoginBg from './init.ts'
import React, {useEffect, useState} from "react";
import { Input, Space, Button} from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import './login.scss'

const Login = () => {

  //账号密码验证码
  const [usernameVal, setUsernameVal] = useState('')
  const [passwordVal, setPasswordVal] = useState('')
  const [captchaVal, setCaptchaVal] = useState('')
  //用户输入信息
  const usernameChange = (e:React.ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target.value)
    setUsernameVal(e.target.value)
  }
  const passwordChange = (e:React.ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target.value)
    setPasswordVal(e.target.value)
  }
  const captchaChange = (e:React.ChangeEvent<HTMLInputElement>) => {
    setCaptchaVal(e.target.value)
  }
  //登录回调
  const toLogin = () => {
    console.log('username:',usernameVal,',password:',passwordVal,',captcha:',captchaVal)
  }
  // 加载完毕之后
  useEffect(()=>{
    initLoginBg();
    //窗口改动调用以达到自适应效果
    window.onresize = function(){initLoginBg()};
  },[])

  return(
    <div className={styles.loginPage}>
      {/*存放背景*/}
      <canvas id='canvas' style={{display:'block'}}></canvas>
      <div className={styles.loginBox+ " loginBox"}>
        {/* 标题部分 */}
        <div className={styles.title}>
          <h1>xin&nbsp;·&nbsp;通用后台系统</h1>
        </div>
        {/*登录表单*/}
        <div className='from'>
          <p>不要回头&nbsp;&nbsp;一直向前</p>
          <Space direction='vertical' size='middle' style={{display:'flex'}}>
            <Input placeholder="用户名" onChange={usernameChange}/>
            <Input.Password
              placeholder="密码"
              iconRender={(visible) => (visible ? <EyeTwoTone style={{color:'#1890ff'}}/> : <EyeInvisibleOutlined style={{color:'#1890ff'}} />)}
              onChange={passwordChange}
            />
            <div className='captchaBox'>
              <Input placeholder='验证码' onChange={captchaChange}></Input>
              <div className='captchaImg'>
                <img src='./src/assets/img/img1.png' alt="图片"/>
              </div>
            </div>
            <Button type="primary" block onClick={toLogin}>登录</Button>
          </Space>
        </div>
      </div>
    </div>
  )
}

export default Login